<template>
	<view class="list" >
		<!-- <view class="head">
			<view class="dataItem" @tap='changeDate(index)' :class="{active:index == current}" v-for="(item,index) in date" :key="index">
				{{item.text}}
			</view>
			
		</view> -->
		<v-tabs v-model="current" :tabs="tabs" @change="changeTab" color="#919191" field="field" activeColor="#303030" bgColor='transparent' bold fontSize='34rpx' lineHeight='0' height='100rpx'></v-tabs>
		<scroll-view class="list-c" scroll-y="true">
			<view class="items">
				<view class="none" v-show="list.length < 1">暂无活动</view>
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="btn" v-if="item.join_btn === 0" @tap="goDetail(item.id)">预约活动</view>
					<view class="btn have" v-if="item.join_btn == 1" @tap="goDetail(item.id)" >已预约</view>
					<view class="btn disable" v-if="item.join_btn == 2">预约已满</view>
					<view class="title">{{item.title}}</view>
					<view class="info">
						<view class="info-i">
							  <image src="../../static/img/dingw.png" mode="" class="iconImg"></image>{{item.address}}
						</view>
						<view class="info-i">
								<image src="../../static/img/time.png" mode="" class="iconImg"></image>
								{{$ft.fomartTime(item.start_time).day}}
								{{$ft.fomartTime(item.start_time).time}} - {{$ft.fomartTime(item.end_time).time}}
							</view>
						</view>
				   </view>
			   </view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
        onShareAppMessage(res) {
        	if (res.from === 'button') {
        		// 来自页面内转发按钮
        		console.log(res.target)
        	}
        	return {
        		title: '“书香长江”阅读周活动预约',
        		path: '/pages/list/list',
        		imageUrl: ''
        	}
        },
        
        onShareTimeline(){
        	return {
        		title: '“书香长江”阅读周活动预约',
        		path: '/pages/list/list', // 分享默认跳转到页面地址
        		success: () => {
        			uni.showToast({
        				title: '分享成功',
        				duration: 3000,
        			});
        		},
        		fail: () => {
        			uni.showToast({
        				title: '分享失败',
        				icon: 'none',
        				duration: 3000,
        			});
        		},
        	};
        },
		data() {
			return {
				 list:[],
				 tabs: [
				        {
						   'value':'2024-09-27',
						   'm':'am',
						   "field":"9月27日上午"
						},
						{
						  'value':'2024-09-27',
						   'm':'pm',
						   "field":"9月27日下午"
						},
						{
						  'value':'2024-09-28',
						   'm':'am',
						   "field":"9月28日上午"
						},
						{
						  'value':'2024-09-28',
						   'm':'pm',
						   "field":"9月28日下午"
						},
						{
						  'value':'2024-09-29',
						   'm':'am',
						   "field":"9月29日上午"
						},
						{
						  'value':'2024-09-29',
						   'm':'pm',
						   "field":"9月29日下午"
						}
				      ],
				current:0,
			}
		},
		onLoad:function(){
			  
		},
		onShow: function(){
			this.render();
		},
		computed:{
			
		},
		
		methods: {
			async render(){	
				console.log(this.tabs[this.current]);
				const res = await this.$http({
					url:'api/activity',
					method:"get",
					data:{
						date:this.tabs[this.current].value,
						t:this.tabs[this.current].m
					}
				})
				// console.log('res',res);
				//console.log(res);
				if(res.data.length > 0) {
					this.list = res.data;
				}  else {
					this.list = []
				}
				
				console.log(this.list);
			},
			changeDate(index) {
				this.current = index;
				
			},
			changeTab(index) {
				this.current = index;
				this.render();
			},
			goDetail(id) {
				console.log(id);
				uni.navigateTo({
					url:'/pages/detail/detail?id=' + id
				})
			},
			action() {
				wx.navigateToMiniProgram({
				    appId: 'wx62add167a6ada00d',
				    path: 'pages/index',//要打开B小程序的页面
				    extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
				    envVersion: 'release',//打开的对应小程序环境：开发develop、体验trial、生产release 
				    success(res) {
				        console.log('打开成功',res)
				    }
				})
			}
		}
	}
</script>

<style lang="scss">
	@function px($col) {
	  @return $col / 1.44 + rpx;
	}
	input::-webkit-input-placeholder {
	  color: red; /* 占位符文本颜色 */
	  font-size: 14px; /* 字体大小 */
	}
    .list {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		// padding-top: 90rpx;
		.head {
			position: fixed;
			left: 0;
			top:0;
			right: 0;
			height: 90rpx;
			// background-color: #1080b2;
			font-weight: bold;
			display: flex;
			padding: 0 100rpx;
			.dataItem {
				// text-align: center;
				flex: 1;
				justify-content: center;
				align-items: center;
				display: flex;
				&.active {
					color:#1080b2;
				}
			}
		}
		 .list-c{
			  width:100%;
			  height: 100%;
			  overflow: hidden;
			  padding: 0 px(40);
			  box-sizing: border-box;
			  position: fixed;
			  top:100rpx;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  .items {
				  padding-bottom: 120rpx;
				  .none {
					  padding: 55rpx;
					  text-align: center;
					  color: #8c8c8c;
					  font-weight: 38rpx;
				  }
			  }
			  .item {
				  width: 100%;
				  background-color: #fff;
				  padding: px(53) px(53) px(28) px(53);
				  border-radius: 20rpx;
				  box-shadow: 2px 3px 4px rgba(0,0,0,0.1);
				  position: relative;
				  margin-bottom: 25rpx;
				  .title {
					  width: 630rpx;
					  overflow: hidden;
				  }
				  .btn {
					  width: px(242);
					  height: px(102);
					  position: absolute;
					  border-radius: px(50);
					  @include center();
					  right: 15rpx;
					  bottom:15rpx;
					  background-color: #1080b2;
					  color:#fff;
					  font-size: 28rpx;
					  &.disable {
						  background-color: #cccccc;
						  color:#fff;
					  }
					  &.have {
						  background-color: #10b273;
						  color:#fff;
					  }
				  }
				  .info-i {
					  font-size: 16px;
					  margin-bottom: 10px;
					 
				  }
                  .title {
					  font-weight: bold;
					  margin-bottom: 20rpx;
				  }
				  .iconImg {
					  width: 25rpx;
					  height: 28rpx;
					  margin-right: 5px;
					  position: relative;
					  top:2rpx;
					  &.time {
						  width: 28rpx;
					  }
				  }
			  }
		 }
		 
		 ::-webkit-scrollbar {
		   width: 0;
		   height: 0;
		   color: transparent;
		 }
		 
		 .pdf-lou {
			 background-color: #fff;
			 border-radius: 18rpx;
			 padding: 36rpx 36rpx;
			 margin-top: 32rpx;
			 color:#2e323e;
			 overflow: hidden; 
			 text-overflow: ellipsis;
			 white-space: nowrap;
			 
		 }
		
		 .is_bottom{
			 height: 75rpx;
			 line-height: 75rpx;
		 }
		

			.vidoe-lou {
				padding-top: 32rpx;
				margin-bottom:32rpx;
				.videoWrap {
					width: 100%;
					height: 280rpx;
					margin-bottom: 22rpx;
					position: relative;
					border-radius: 8rpx;
					overflow: hidden;
					.videoIcon {
						width: 50rpx;
						height:33rpx;
						position: absolute;
						top:30rpx;
						left:20rpx;
					}
					image {
						width: 100%;
						height: 280rpx;
					}
				}
				.name {
					color: #2e323e;
					max-height: 80rpx;
					overflow: hidden;
					margin-bottom: 10rpx;
				}
				.time {
					color: #868c9f;
					height: 52rpx;
					line-height: 52rpx;
					
				}
			}
	
	  .title-lou {
	  			 padding: 34rpx;
	  			 background-color: #fff;
	  			
	  			 margin-top: 28rpx;
	  			 .name {
	  			 	 font-size: 32rpx;
	  			 }
	  			 
	  			 .bts {
	  				 display: flex;
	  				 justify-content: space-between;
	  				 padding-top: 24rpx;
	  				 .tagBt {
	  					 position:relative;
	  					 top:-14rpx;
	  					 color:#cccccc;
	  				 }
	  				 .bt {
	  					 width: 134rpx;
	  					 height: 56rpx;
	  					 border-radius: 28rpx;
	  					 color:#fff;
	  					 @include  center;
	  					 font-size: 24rpx;
	  				 }
	  			 }
	  			
	  }
	}
	
</style>

